<!DOCTYPE html>
<!--thymeleaf 前置和命名空间-->
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>大帅银行 | 您的金融助手</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap/dist/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/css/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <!-- NProgress -->
    <link th:href="@{/css/nprogress/nprogress.css}" rel="stylesheet">
  
    <!-- iCheck -->
    <link th:href="@{/css/iCheck/skins/flat/green.css}" rel="stylesheet">
    <!-- bootstrap-progressbar -->
    <link th:href="@{/css/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css}" rel="stylesheet">
    <!-- JQVMap -->
    <link th:href="@{/css/jqvmap/dist/jqvmap.min.css}" rel="stylesheet"/>

    <!-- Custom Theme Style -->
    <link th:href="@{/css/custom.css}" rel="stylesheet">
    <style>
      .customer_info li{
        font-size: 20px;
      }
      .customer_info_title{
        text-shadow: 1px 1px 2px #5bc0de;
      }
      #cer-err-info{
        color: red;
        display: none;

      }
    </style>
  
    
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div class="col-md-3 left_col">
          <div class="left_col scroll-view">
            <div class="navbar nav_title" style="border: 0;">
              <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>大帅银行</span></a>
            </div>

            <div class="clearfix"></div>

            <!-- menu profile quick info -->
            <div class="profile">
              <div class="profile_pic">
                <img th:src="@{/img/logo.png}" alt="..." class="img-circle profile_img">
              </div>
              <div class="profile_info">
                <span>欢迎您,</span>
                <h2 th:text="${#authentication.name == 'anonymousUser' ? '请登录': #authentication.principal.empName}"></h2>
              </div>
            </div>
            <!-- /menu profile quick info -->

            <br />

            <!-- sidebar menu -->
            <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
              <div class="menu_section">
                <h3>功能</h3>
                <ul class="nav side-menu">
                  <li><a th:href="@{/}"><i class="fa fa-home"></i> 返回首页 </span></a>
                    
                  </li>
                 
                  
                  <li><a><i class="fa fa-table"></i> 客户管理 <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a th:href="@{/customer/show_customer}">查看客户</a></li>
                      <li><a th:href="@{/customer/add_customer}">添加客户</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-clone"></i>贷款申请管理 <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a th:href="@{/loan/show_loans_apply}">查看贷款申请</a></li>
                      <li><a th:href="@{/loan/add_apply}">添加贷款申请</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-clone"></i>贷款审批 <span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a th:href="@{/loan/show_loans_apply}">审批贷款</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-bar-chart-o"></i>贷款产品管理<span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a th:href="@{/loan_produce/show_list}">查看看贷款产品</a></li>
                      <li><a th:href="@{/loan_produce/add_produce}">添加贷款产品</a></li>
                    </ul>
                  </li>
                  <li><a><i class="fa fa-bar-chart-o"></i>员工管理<span class="fa fa-chevron-down"></span></a>
                    <ul class="nav child_menu">
                      <li><a th:href="@{/emp/show_emps}">查看员工</a></li>
                      <li><a th:href="@{/emp/add_emp}">添加员工</a></li>
                    </ul>
                  </li>

                </ul>
              </div>
              
              </div>

            </div>
            <!-- /sidebar menu -->

            <!-- /menu footer buttons -->
            <div class="sidebar-footer hidden-small">
              <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Logout">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
              </a>
            </div>
            <!-- /menu footer buttons -->
          </div>
        </div>

        <!-- top navigation -->
        <div class="top_nav">
          
          <div class="nav_menu">
            <nav>
              <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
              </div>

              <ul class="nav navbar-nav navbar-right">

                <li class="">
                  <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <!--                    <span th:text="${#authentication == 'anonymousUser'?'请登录': #authentication.principal.empName}"></span>-->
                    <span th:text="${#authentication.name == 'anonymousUser' ? '请登录': #authentication.principal.empName}"><span/>
                    <span class=" fa fa-angle-down"></span>
                  </a>
                  <ul class="dropdown-menu dropdown-usermenu pull-right">
                    <li><a th:href="@{/emp/login}"><i class="fa fa-sign-out pull-right"></i>登录</a></li>
                    <li><a th:href="@{/logout}"><i class="fa fa-sign-out pull-right"></i>注销</a></li>
                  </ul>
                </li>


                <li role="presentation" class="dropdown">
                  <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
                    <i class="fa fa-envelope-o"></i>
                   
                  </a>
                </li>
              </ul>
                  
            </nav>
          </div>
        </div>
        <!-- /top navigation -->

      <!-- page content -->
      <div class="right_col" role="main">
        <div class="">
          <div class="page-title">
            <div class="title_left">
              <h3>客户管理</h3>
            </div>

            <div class="title_right">
              <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search for...">
                  <span class="input-group-btn">
                              <button class="btn btn-default" type="button">Go!</button>
                          </span>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>

          <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
                <div class="x_title">
                  <h2>添加客户 <small>请输入客户信息</small></h2>
                  <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Settings 1</a>
                        </li>
                        <li><a href="#">Settings 2</a>
                        </li>
                      </ul>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <div class="x_content">

<!--                  <form th:action="@{/customer/do_add_cus}" method="post" class="form-horizontal form-label-left">-->

                  <form th:action="@{/customer/do_add_customer}" class="form-horizontal form-label-left" method="post" enctype="multipart/form-data">
                    </p>
                    <span class="section">客户信息</span>

                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">姓名 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="name"  class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="customerName" placeholder="请输入客户姓名" required="required" type="text">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="customerType">客户身份 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="customerTypeId" id="customerType" class="form-control" required >
                          <option>----请选择客户身份类型----</option>
                          <option th:each="ct:${customerTypes}" th:value="${ct.id}" th:text="${ct.valueName}"></option>
<!--                          <option th:value="${ct.id}" th:text="${ct.valueName}"></option>-->
                        </select>
<!--                        <input type="" id="customerType" name="email" required="required" class="form-control col-md-7 col-xs-12">-->
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="certificateTypeId">证件类型 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="certificateTypeId" id="certificateTypeId" class="form-control" required>
                          <option>----请选择客户证件类型----</option>
                          <option th:each="cft : ${certificateTypes}" th:value="${cft.id}" th:text="${cft.valueName}"></option>
                        </select>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="eduTypeId">客户学历 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="educationId" id="eduTypeId" class="form-control" required>
                          <option>----请选择客户学历----</option>
                          <option th:each="edu : ${educationStatus}" th:value="${edu.id}" th:text="${edu.valueName}"></option>
                        </select>
                      </div>
                    </div>
<!--                    -->
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="certificateNo">证件号码 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="certificateNo" name="certificateNo" required="required"  class="form-control col-md-7 col-xs-12">
                        <span id="cer-err-info">该身份证号码已存在</span>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="certificate_img_url">证件图片 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="file" id="certificate_img_url" name="certificateFileImgUrl" required="required"  class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="provnice">居住省份 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="pId" id="provnice" class="form-control" required>
                          <option >----请选择客户居住省份----</option>
                          <option th:each="p:${provinces}" th:value="${p.id}" th:text="${p.name}"></option>
                        </select>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="city">居住城市 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="cId" id="city" class="form-control" required>
                          <option>----请选择客户居住城市----</option>
                        </select>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="town">居住区(市/县) <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <select name="tId" id="town" class="form-control" required>
                          <option>----请选择客户居住区(市/县)----</option>
                        </select>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label  class="control-label col-md-3" for="home_address">详细住址 <span class="required">*</span></label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="home_address" type="text" name="homeAddress" class="form-control col-md-7 col-xs-12" required="required" placeholder="请输入客户详细地址">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="tel_no">联系电话 <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="tel_No" type="text" name="telNo" data-validate-length-range="5,11" class="optional form-control col-md-7 col-xs-12" placeholder="请输入客户的联系电话" required>
                      </div>
                    </div>
                    <div class="item form-group">
                      <label for="co_name" class="control-label col-md-3 col-sm-3 col-xs-12">单位名称</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="co_name" type="text" name="coName"  class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="co_address">单位地址
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="text" id="co_address" name="coAddress"  class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="ln_solid"></div>
                    <div class="form-group">
                      <div class="col-md-6 col-md-offset-3">
                        <input id="send" type="submit" class="btn btn-success" value="提交">
                        <input type="reset" class="btn btn-primary" value="取消">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


        </div>
        <!-- /page content -->

        <!-- footer content -->
        <footer>
          <div class="pull-right">
            大帅银行 - 您的金融助手 by <a href="https://www.dsbank.com">大帅银行</a>
          </div>
          <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->
      </div>
    </div>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/css/bootstrap/dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/fastclick.js}"></script>
    <script th:src="@{/js/nprogress.js}"></script>
    <script th:src="@{/js/Chart.js}"></script>
    <script th:src="@{/js/gauge.js}"></script>
    <script th:src="@{/js/bootstrap-progressbar.min.js}"></script>
    <script th:src="@{/js/icheck.js}"></script>
    <script th:src="@{/js/skycons.js}"></script>
    <script th:src="@{/js/jquery.flot.js}"></script>
    <script th:src="@{/js/jquery.flot.pie.js}"></script>
    <script th:src="@{/js/jquery.flot.time.js}"></script>
    <script th:src="@{/js/jquery.flot.stack.js}"></script>
    <script th:src="@{/js/jquery.flot.resize.js}"></script>
    <script th:src="@{/js/jquery.flot.orderBars.js}"></script>
    <script th:src="@{/js/jquery.flot.spline.min.js}"></script>
    <script th:src="@{/js/curvedLines.js}"></script>
    <script th:src="@{/js/date.js}"></script>
    <script th:src="@{/js/jquery.vmap.js}"></script>
    <script th:src="@{/js/jquery.vmap.world.js}"></script>
    <script th:src="@{/js/jquery.vmap.sampledata.js}"></script>
    <script th:src="@{/js/moment.min.js}"></script>
    <script th:src="@{/js/daterangepicker.js}"></script>
    <script th:src="@{/js/custom.min.js}"></script>
    <script>
      $("#provnice").change(function (){
        //首先清楚城市内容
        $("#city").html("<option>----请选择客户居住城市----</option>")
        // alert($(this).val())
        //使用ajax调用接口数据
        $.ajax({
          //访问的接口地址
          url:"/pcd/query_pcd/" + $(this).val(),
          //定义返回值类型
          dataType:"json",
          //使用回调函数获取数据
          success:function (data) {
            // console.log(data)
            //便利获取的结果，放在在城市
            $(data).each(function (i,e){
              // console.log(e.name)
              $("#city").append("<option value=" + e.id +">" + e.name + "</option>");
            })

          }
          // //捕获错误信息
          // error:function (e){
          //   alert(e)
          // }
        })
      })


      $("#city").change(function (){
        //首先清楚城市内容
        $("#town").html("<option>----请选择客户居住区(市/县)----</option>")
        // alert($(this).val())
        //使用ajax调用接口数据
        $.ajax({
          //访问的接口地址
          url:"/pcd/query_pcd/" + $(this).val(),
          //定义返回值类型
          dataType:"json",
          //使用回调函数获取数据
          success:function (data) {
            // console.log(data)
            //便利获取的结果，放在在城市
            $(data).each(function (i,e){
              // console.log(e.name)
              $("#town").append("<option value=" + e.id +">" + e.name + "</option>");
            })

          }
          // //捕获错误信息
          // error:function (e){
          //   alert(e)
          // }
        })
      })

      $("#certificateNo").blur(function (){
        //异步访问的地址
        let url = "/customer/query_cert_no?certifino=" + $(this).val();
          // alert(url);
        $.ajax({
          //传入地址
          url:url,
          //设定返回类型
          dataType:"json",
          //返回成功的回调函数
          success:function (data){

            //对返回值进行处理
            console.log(data);
            console.log("++++++++++++++++++");

            if (data.code == 2000){
              // alert("该身份身份号码已存在")
              $("#cer-err-info").css("display","inline");
              $("#send").attr("disabled",true);
            }else {
              $("#send").attr("disabled",false);
            }


          }
        })
      })
    </script>
  </body>
</html>
